<template>
  <q-scroll-area class="online-process-tab full-height" :thumb-style="thumbStyle">
    <q-list bordered class="rounded-borders overflow-hidden margin-r-20 margin-l-20">
      <template v-if="message.length === 0">
        暂无数据
      </template>
      <template v-else>
        <q-expansion-item
        :key="index"
        v-for="(item, index) in message"
        default-opened
        style="border-bottom: 1px solid #D3D3D3"
        switch-toggle-side
        expand-separator
        header-class="bg-primary text-white expansion-header"
      >
        <template v-slot:header>
          <q-icon name="iconfont icontubiao-120" class="header-icon"></q-icon>
          <label>{{ `路径${index + 1}` }}</label>
        </template>
        <q-card class="card-contnet">
          <q-card-section>
            <!--直线轴-->
            <div>
              <div>
                <div class="axis-title">伺服轴</div>
                <div class="axis-title">实际坐标(mm)</div>
                <div class="axis-title">相对坐标(mm)</div>
                <div class="axis-title">轴极限(mm)</div>
                <div class="axis-title">负载(%)</div>
                <div class="axis-title">轴温度( °C )</div>
              </div>
              <template v-if="Object.getOwnPropertyNames(item.feedAxes.straight).length === 1">
                <div class="axis-content" v-for="i in 6" :key="i">--</div>
              </template>
              <template v-else>
                <div
                  v-for="(axis, axisName) in item.feedAxes.straight"
                  :key="`${axis}+${axisName}`">
                  <div class="axis-content">{{ axisName }}</div>
                  <div class="axis-content">{{ axis.act || '0' }}</div>
                  <div class="axis-content">--</div>
                  <div class="axis-content">--</div>
                  <div class="axis-content">{{ axis.load || '0%' }}</div>
                  <div class="axis-content">--</div>
                </div>
              </template>
            </div>

            <!--旋转轴-->
            <div style="margin-top: 18px">
              <div>
                <div class="axis-title">伺服轴</div>
                <div class="axis-title">实际角度(°)</div>
                <div class="axis-title">相对角度(°)</div>
                <div class="axis-title">轴极限(mm)</div>
                <div class="axis-title">负载(%)</div>
                <div class="axis-title">轴温度( °C )</div>
              </div>
              <template v-if="Object.getOwnPropertyNames(item.feedAxes.rotating).length === 1">
                <div class="axis-content" v-for="i in 6" :key="i">--</div>
              </template>
              <template v-else>
                <div
                  v-for="(axis, axisName) in item.feedAxes.rotating"
                  :key="`${axis}+${axisName}`">
                  <div class="axis-content">{{ axisName }}</div>
                  <div class="axis-content">{{ axis.act || '0' }}</div>
                  <div class="axis-content">--</div>
                  <div class="axis-content">--</div>
                  <div class="axis-content">{{ axis.load || '0%' }}</div>
                  <div class="axis-content">--</div>
                </div>
              </template>
            </div>

            <div class="border-style"/>

            <!--主轴-->
            <div style="margin-top: 18px">
              <div>
                <div class="axis-title">主轴</div>
                <div class="axis-title">主轴转速(实际)</div>
                <div class="axis-title">主轴转速(设定)</div>
                <div class="axis-title">主轴倍率</div>
                <div class="axis-title">负载(%)</div>
                <div class="axis-title">轴温度( °C )</div>
              </div>
              <template v-if="Object.getOwnPropertyNames(item.spindles).length === 1">
                <div class="axis-content" v-for="i in 6" :key="i">--</div>
              </template>
              <template v-else>
                <div
                  v-for="(axis, axisName) in item.spindles"
                  :key="`${axis}+${axisName}`">
                  <div class="axis-content">{{ axisName }}</div>
                  <div class="axis-content">{{ axis.speed || '0' }}</div>
                  <div class="axis-content">--</div>
                  <div class="axis-content">{{ axis.speedOvr || '0' }}</div>
                  <div class="axis-content">{{ axis.load || '0%' }}</div>
                  <div class="axis-content">--</div>
                </div>
              </template>
            </div>

            <div class="border-style"/>
            <div class="flex font-size-16 padding-20 border-b">
              <div style="flex: 2;" class="flex">
                <div class="text-right title" style="width: 125px">进给(mm/min)：</div>
                <div class="content">{{ item.path_feedrate || '--' }}</div>
              </div>

              <div style="flex: 1;" class="text-right title">进给倍率：</div>
              <div style="flex: 1" class="content">{{ item.Fovr || '--' }}</div>

              <div class="text-right" style="flex: 2;">
                快移倍率：
                <span class="content">{{ '--' }}</span>
              </div>
            </div>

            <div class="flex font-size-16 padding-20 border-b">
              <div style="flex: 2;" class="flex">
                <div class="text-right title" style="width: 125px">当前加工程序：</div>
                <div class="content">{{ item.program || '--' }}</div>
              </div>
              <div style="flex: 1;" class="text-right title">
                <i style="color: #5F77FD" class="iconfont icontubiao-126"/>
                当前程序块：
              </div>
              <div class="content" style="flex: 1">{{ item.block || '--' }}</div>
              <div class="text-right" style="flex: 2;"/>
            </div>

            <div class="flex font-size-16 padding-20" style="padding-bottom: 4px">
              <div style="flex: 2;" class="flex">
                <div class="text-right title" style="width: 125px">当前刀位号：</div>
                <div class="content">{{ item.tool_id || '--' }}</div>
              </div>
              <div style="flex: 1;" class="text-right title">当前刀具信息：</div>
              <div style="flex: 1;" class="content">{{ '--' }}</div>
              <div class="text-right" style="flex: 2;">
              </div>
            </div>
          </q-card-section>
        </q-card>
      </q-expansion-item>
      </template>
    </q-list>
  </q-scroll-area>
</template>

<script>
import { RealtimeProcessingDataMsgParser } from 'src/assets/js/util'
export default {
  name: 'online-process-tab',
  props: {
    msg: {
      type: String,
      default: ''
    },
    system: {
      type: Array
    }
  },
  watch: {
    msg (val) {
      this.message = this.msgParser.parse(val)
      // const testVal = '|tool_id|0|Yact|0.000|Yload|0.000|Zload|0.000|program|O3333.O3333|Fovr|0|time|2020-04-14T02:25:31.528102Z|Xact|0.000|Xload|0.000|line|0|Zact|0.000|block|O0000%|path_feedrate|0'
      // this.message = this.msgParser.parse(testVal)
    }
  },
  data () {
    return {
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      message: [], // mq消息
      systemInfo: [], // 系统信息
      msgParser: null
    }
  },
  created () {
    if (!this.system.length) {
      console.log(this.system, '该设备无设备信息')
    }
    this.msgParser = new RealtimeProcessingDataMsgParser(this.system)
  },
  methods: {
  }
}
</script>

<style scoped lang="stylus">
  .expansion-header{
    padding-left 30px
    padding-right 30px
    border-bottom 1px solid #d3d3d3
    .header-icon{
      margin-top 8px
      margin-right 10px
    }
    label{
      line-height 32px
      font-size 16px
    }
  }
  .title {
    font-size:16px;
    font-weight:500;
    color:rgba(51,51,51,1);
/*    width calc(100% / 6)
    display inline-block*/
  }
  .content {
    /*margin-top 18px*/
    font-size:14px;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height 24px
/*    width calc(100% / 6)
    display inline-block*/
  }
  .axis-title {
    font-size:16px;
    font-weight:500;
    color:rgba(51,51,51,1);
    width calc(100% / 6)
    display inline-block
  }
  .axis-content {
    /*margin-top 18px*/
    font-size:14px;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height 24px
    width calc(100% / 6)
    display inline-block
  }
  .border-style {
    margin-top: 14px;
    background-color: rgba(211,211,211,1);
    height: 1px; width: 100%
  }
  .padding-20{
    padding 20px 0
  }
  .border-b{
    border-bottom $border
  }
  .card-contnet .border-b:last-child{
    border none
  }
</style>
